<!-- 基本信息表 -->
<template>
  <div class="fcontainer">
    <el-table
      :data="tableData"
      :show-header="false"
      :span-method="objectSpanMethod"
      border
      :cell-style="{ borderColor: '#bbb' }"
      :header-cell-style="{ borderColor: '#bbb' }"
      style="width: 80%; --el-table-border-color: #bbb"
    >
      <el-table-column
        class-name="one-index"
        prop="oneIndex"
        label=""
        align="center"
      />
      <el-table-column
        class-name="two-index"
        prop="twoIndex"
        label=""
        align="center"
      />
      <el-table-column
        class-name="three-index"
        prop="threeIndex"
        label=""
        align="center"
      />
      <el-table-column
        class-name="four-index"
        prop="fourIndex"
        label=""
        align="center"
      />
      <el-table-column
        class-name="five-index"
        prop="fiveIndex"
        label=""
        align="center"
      />
      <el-table-column
        class-name="six-index"
        prop="sixIndex"
        label=""
        align="center"
      />
      <el-table-column
        class-name="seven-index"
        prop="sevenIndex"
        label=""
        align="center"
      />
    </el-table>
  </div>
</template>
<script setup name="basicTemplate">
const tableData = ref([
  {
    oneIndex: "评估对象",
    twoIndex: "北京纺织控股有限责任公司部分设备类资产",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "填报日期",
    sixIndex: "2015-06-30",
    sevenIndex: "",
  },
  {
    oneIndex: "产权持有单位",
    twoIndex: "北京能源投资(集团)有限公司",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "企业管理级次",
    sixIndex: "一级",
    sevenIndex: "",
  },
  {
    oneIndex: "资产评估委托方",
    twoIndex: "北京能源投资(集团)有限公司",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "资产所在地",
    sixIndex: "北京市-顺义区",
    sevenIndex: "",
  },
  {
    oneIndex: "所出资企业(有关部门)",
    twoIndex: "北京能源集团有限责任公司",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "所属行业",
    sixIndex: "基金管理服务",
    sevenIndex: "",
  },
  {
    oneIndex: "所属国资委",
    twoIndex: "北京市国资委",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "主要行业",
    sixIndex: "基金管理服务",
    sevenIndex: "",
  },
  {
    oneIndex: "经济行为类型",
    twoIndex: "进场交易",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "主要评估方法",
    sixIndex: "成本法",
    sevenIndex: "",
  },
  {
    oneIndex: "评估报告书编号",
    twoIndex: "中资评报[2015]31号",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "最终选取评估方法",
    sixIndex: "成本法",
    sevenIndex: "",
  },
  {
    oneIndex: "评估机构名称",
    twoIndex: "中资资产评估有限公司",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "备案公告号",
    sixIndex: "11020017",
    sevenIndex: "",
  },
  {
    oneIndex: "注册评估师姓名",
    twoIndex: "雷春雨 、李金友",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "职业登记编号",
    sixIndex: "11000891",
    sevenIndex: "11090006",
  },
  {
    oneIndex: "产权持有单位联系人",
    twoIndex: "贺超",
    threeIndex: "电话",
    fourIndex: "65249094",
    fiveIndex: "通讯地址",
    sixIndex: "北京市东城区东单三条33号",
    sevenIndex: "",
  },
  {
    oneIndex: "所出资企业(有关部门)联系人",
    twoIndex: "贺超",
    threeIndex: "电话",
    fourIndex: "65249094",
    fiveIndex: "通讯地址",
    sixIndex: "北京市东城区东单三条33号",
    sevenIndex: "",
  },
  {
    oneIndex: "申报单位法定代表人",
    twoIndex: "陆海军",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "同意转报单位法定代表人",
    sixIndex: "陆海军",
    sevenIndex: "",
  },
  {
    oneIndex: "批准申报签字日期",
    twoIndex: "2015-03-06",
    threeIndex: "",
    fourIndex: "",
    fiveIndex: "批准转报签字日期",
    sixIndex: "2015-03-06",
    sevenIndex: "",
  },
]);
const objectSpanMethod = ({ rowIndex, columnIndex }) => {
  // rowIndex, // 行索引  columnIndex, // 列索引
  if (columnIndex == 1) {
    if (
      rowIndex === 0 ||
      rowIndex === 1 ||
      rowIndex === 2 ||
      rowIndex === 3 ||
      rowIndex === 4 ||
      rowIndex === 5 ||
      rowIndex === 6 ||
      rowIndex === 7 ||
      rowIndex === 8 ||
      rowIndex === 11 ||
      rowIndex === 12
    ) {
      return {
        rowspan: 1,
        colspan: 3,
      };
    } else {
      return {
        rowspan: 1,
        colspan: 1,
      };
    }
  } else if (columnIndex == 2) {
    if (
      rowIndex === 0 ||
      rowIndex === 1 ||
      rowIndex === 2 ||
      rowIndex === 3 ||
      rowIndex === 4 ||
      rowIndex === 5 ||
      rowIndex === 6 ||
      rowIndex === 7 ||
      rowIndex === 8 ||
      rowIndex === 11 ||
      rowIndex === 12
    ) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  } else if (columnIndex == 3) {
    if (
      rowIndex === 0 ||
      rowIndex === 1 ||
      rowIndex === 2 ||
      rowIndex === 3 ||
      rowIndex === 4 ||
      rowIndex === 5 ||
      rowIndex === 6 ||
      rowIndex === 7 ||
      rowIndex === 8 ||
      rowIndex === 11 ||
      rowIndex === 12
    ) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  } else if (columnIndex == 5) {
    if (
      rowIndex === 0 ||
      rowIndex === 1 ||
      rowIndex === 2 ||
      rowIndex === 3 ||
      rowIndex === 4 ||
      rowIndex === 5 ||
      rowIndex === 6 ||
      rowIndex === 7 ||
      rowIndex === 9 ||
      rowIndex === 10 ||
      rowIndex === 11 ||
      rowIndex === 12
    ) {
      return {
        rowspan: 1,
        colspan: 2,
      };
    }
  } else if (columnIndex == 6) {
    if (
      rowIndex === 0 ||
      rowIndex === 1 ||
      rowIndex === 2 ||
      rowIndex === 3 ||
      rowIndex === 4 ||
      rowIndex === 5 ||
      rowIndex === 6 ||
      rowIndex === 7 ||
      rowIndex === 10
    ) {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  } else {
    return {
      rowspan: 1,
      colspan: 1,
    };
  }
};
</script>

<style scoped lang="scss">
.fcontainer {
  :deep(.el-table) {
    .one-index {
      background-color: #e4f6fd !important;
      font-weight: bold;
    }
    .five-index {
      background-color: #e4f6fd !important;
      font-weight: bold;
    }
    .el-table__body-wrapper {
      border-color: #bbb !important; /* 例如：#f00（红色） */
    }
    .el-table__header-wrapper {
      border-color: #bbb !important; /* 例如：#f00（红色） */
    }
  }
}
</style>

